<!-- Email 输入组件 -->
<script lang="ts" setup>
import { i18nTranslate } from '/@/i18n';

import { isEmail } from "/@/utils/index";

import InputBase from "./InputBase.vue";
import { ref } from "vue";
import { replaceChinese, replaceEmoji, replaceSpace } from "/@/utils/format";

// 定义 props
defineProps<{
    modelValue?: string;
    autofocus?: boolean;
}>();

// 定义外部事件
const emit = defineEmits(["update:modelValue"]);

const inputRef = ref()

// 内部事件
const onClear = () => emit('update:modelValue', '');
const onInput = (value: string) => {
    // 移除空格
    let _value = replaceSpace(value);
    // 移除中文 
    _value = replaceChinese(_value);
    // 移除表情
    _value = replaceEmoji(_value);
    // 直接操作 input 来修改
    inputRef.value.inputEle.el.value = _value;
    emit('update:modelValue', _value);
};


// 校验规则，返回true表示通过校验
// const rules = [
//     (v: string) => !!v || i18nTranslate('form_email_empty'),
//     (v: string) => isEmail(v) || i18nTranslate('form_email_not_correct'),
// ];

</script>
<template>
    <InputBase ref="inputRef"  maxlength="200" :model-value="modelValue" :autofocus="autofocus"
        @clear="onClear" @input="onInput">
        <template #prepend>
            <!-- <div class="icon_box">
                <img :src="$img('common/email_icon.png')" />
            </div> -->
        </template>
    </InputBase>
</template>
<style lang="scss" scoped>
.icon_box {
    width: 36px;
    height: 36px;
    margin-right: 40px;

    img {
        width: 100%;
        height: 100%;
    }
}
</style>
